<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析结果 - 资讯分析工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        'neutral-light': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="/" class="flex-shrink-0 flex items-center">
                        <i class="fa fa-line-chart text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">资讯分析工具</span>
                    </a>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="/dashboard?api_key={{ api_key }}" class="border-b-2 border-primary text-sm font-medium text-primary px-1 pt-1 inline-flex items-center">
                            <i class="fa fa-dashboard mr-1"></i>仪表盘
                        </a>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="relative mr-3">
                        <button type="button" class="flex items-center text-sm font-medium text-gray-700 hover:text-primary focus:outline-none">
                            <span class="mr-2">欢迎, {{ username }}</span>
                            <i class="fa fa-user-circle text-primary text-xl"></i>
                        </button>
                    </div>
                    <a href="/login" class="text-sm font-medium text-gray-700 hover:text-primary px-3 py-2 rounded-md transition-custom">
                        <i class="fa fa-sign-out mr-1"></i>退出
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow p-4 sm:p-6 lg:p-8">
        <div class="max-w-7xl mx-auto">
            <!-- 标题 -->
            <div class="mb-8 flex items-center justify-between">
                <div>
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">资讯分析结果</h1>
                    <p class="mt-2 text-lg text-gray-600">任务ID: #{{ task.id }} - {{ task.url }}</p>
                </div>
                <a href="/dashboard?api_key={{ api_key }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fa fa-arrow-left mr-2"></i>返回仪表盘
                </a>
            </div>

            <!-- 分析结果卡片 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                <!-- 词云图 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-4">关键词词云</h2>
                    <div class="flex justify-center">
                        <!-- 添加图片标签并设置词云图的本地路径 -->
                        <img src="/{{ task.wordcloud_path }}" alt="关键词词云" class="max-w-full h-auto">
                    </div>
                </div>

                <!-- 词频分布 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-4">词频分布</h2>
                    <div class="h-96 overflow-hidden">
                        <iframe src="/{{ task.word_freq_bar_path }}" class="w-full h-full border-0"></iframe>
                    </div>
                </div>

                <!-- 主题分布 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-xl font-bold text-gray-900 mb-4">主题分布</h2>
                    <div class="h-96 overflow-hidden">
                        <iframe src="/{{ task.word_pie_path }}" class="w-full h-full border-0"></iframe>
                    </div>
                </div>
            </div>

            <!-- 高频词汇 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-4">高频词汇 TOP 20</h2>
                <div class="flex flex-wrap gap-2">
                    {% for word in word_frequency %}
                    <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium">
                        {{ word.word }} <span class="font-bold">{{ word.frequency }}</span>
                    </span>
                    {% endfor %}
                </div>
            </div>

            <!-- 新闻列表 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-gray-900">新闻列表 (最新100条)</h2>
                    <div class="text-sm text-gray-500">
                        显示 {{ news_data|length }} 条新闻
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for news in news_data %}
                            <tr class="hover:bg-gray-50 transition-custom">
                                <td class="px-6 py-4">
                                    <div class="text-sm font-medium text-gray-900">{{ news.title }}</div>
                                    <div class="text-sm text-gray-500 mt-1 line-clamp-2">
    {% if news.cleaned_content is string %}
        {{ news.cleaned_content[:200] }}...
    {% else %}
        {{ str(news.cleaned_content) }}
    {% endif %}
</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ news.publish_time or '-' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ news.url }}" target="_blank" class="text-primary hover:text-primary/80 transition-custom">
                                        <i class="fa fa-external-link mr-1"></i>查看原文
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% if not news_data %}
                <div class="py-10 text-center">
                    <div class="flex justify-center">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fa fa-file-text-o text-gray-400 text-2xl"></i>
                        </div>
                    </div>
                    <h3 class="mt-4 text-sm font-medium text-gray-900">暂无新闻数据</h3>
                    <p class="mt-2 text-sm text-gray-500">未能从该网站提取到新闻内容</p>
                </div>
                {% endif %}
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-sm text-gray-500">
                    © 2025 资讯分析工具. 保留所有权利.
                </div>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-github"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>